<script setup>
import * as echarts from 'echarts';
import { ref,onMounted,watch } from 'vue';

// 获取 dom 实例
const target = ref(null)
// echarts 实例变量
let myChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart()
})

const renderChart = () =>{
  const option = {
    xAxis:{
      show: false,
      type: 'value'
    },
    yAxis:{
      show:false,
      type: 'value'
    },
    series:[
      {
        type: 'graph', // 关系图,用于展现节点以及节点之间的关系数据
        layout: 'none', // 不使用任何布局，使用节点定位
        coordinateSystem: 'cartesian2d',  // 使用二维的直角坐标系
        symbolSize: 26, // 节点大小
        z: 3, // 节点层级
        label: {
          show: true,
          position: 'bottom',
          color:'#5E5E5E',
        },
        edgeLabel: { // 边的标签
          show: true,
          color: '#fff',
          fontSize: 14,
          formatter: function(params){
            return params.data.speed
          }
        },
        edgeSymbol: ['none', 'arrow'], // 边的箭头
          edgeSymbolSize: 8, // 箭头大小
          data: props.data.relations.map(item=>{
            if(item.id !== 0){
              return {
                name:item.name, 
                category:0, //节点分类
                active: true, // 是否激活
                speed: `${item.speed}kb/s`,
                value:item.value
              }
            }else{
              return {
                name:item.name,
                value:item.value,
                symbolSize: 100,
                itemStyle:{
                  colorStops:[ // 渐变颜色
                      {
                        offset: 0,
                        color: '#157eff' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#35c2ff' // 100% 处的颜色
                      }
                    ]
                },
                label:{
                  fontSize: 14
                }
              }
            }
          }),
          links: props.data.relations.map(item=>{
            return {
              source: item.source, // 源节点
              target: item.target, // 目标节点
              speed: `${item.speed}kb/s`,
              lineStyle:{
                color: '#12b5d0',
                curveness:0.2, // 线的弯曲度
              },
              label:{
                show: true,
                position: 'middle',
                offset:[10, 0] // 标签偏移
              }
            }
          }),
      },
      {
        type:'lines', // 线条
        coordinateSystem: 'cartesian2d',  // 使用二维的直角坐标系
        z: 1,
        effect:{ // 线条上特效的配置
          show: true,
          smooth: false, // 线条不平滑
          trailLength: 0, // 线条长度
          symbol: 'arrow', // 线条上的箭头
          symbolSize: 12, // 箭头大小
          color: 'rgba(55,155,255,0.6)'
        },
        lineStyle:{
          curveness: 0.2 // 线的弯曲度
        },
        data: [
          [{ coord:[0,300]},{coord:[50,200]}],
          [{ coord:[0,100]},{coord:[50,200]}],
          [{ coord:[50,200]},{coord:[100,100]}],
          [{ coord:[50,200]},{coord:[100,300]}]
        ]
      }
    ]
  }

  myChart.setOption(option);
}

const props = defineProps({
  data:{
    type: Object,
    required: true
  }
})

watch(()=>props.data,()=>{
  renderChart()
})



</script>

<template>
  <div>
    <div>【数据传递信息】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>

</template>

<style scoped>

</style>